<template>
  <uni-popup ref="confirm" type="bottom" @change="onClose" mask-background-color="rgba(0, 0, 0, 0)" :isMaskClick="true">
	  <view style="height: 600rpx;background-color: #F0F0F0;" class="flex flex-column align-start justify-center flex-1 border-top">
		<swiper @change="onSwiperChange" :current="current" class="flex-1" style="width: 750rpx;height: 600rpx;">
			<swiper-item>
				<view style="height: 600rpx;background: #fff;overflow: auto;">
					<view v-for="(item,index) in phrase_list" :key="index" hover-class="item-hover" >
						<view class="flex flex-row justify-center flex-1 mx-2 py-3" :style="index != phrase_list.langth-1?'border-bottom: 1px #F2F2F2 solid;':''" @longpress="longFace($event,item)" @click="onText(item)">
							<text class="emojiicon flex-1 text-wrap" style="color: #292929;font-size: 32rpx;">{{item.content}}</text>
							<!-- <em-icon class="add-btn-icon pl-2" :unicode="'\uec86'" style="color: #292929;"></em-icon> -->
						</view>
					</view>
					<view>
						<view class="flex flex-row justify-center mt-3">
							<view @click="editablePopup()">
								<view class="flex flex-row align-center justify-center flex-1 px-5 py-2 px-4" style="background-color: #F2F2F2;border-radius: 10rpx;">
									<em-icon class="add-btn-icon" :unicode="'\uea13'" style="color: #292929;"></em-icon>
									<text style="color: #292929;font-size: 32rpx;">添加常用语</text>
								</view>
							</view>
						</view>
					</view>
					<view>
						<view style="height: 50rpx;"></view>
					</view>
				</view>
			</swiper-item>
		</swiper>
	  </view>
	<!-- 长按菜单 -->
	<em-menus-popup :hasNav="false" :height="116" :width="(menusList.length * 90) + 30" :type="'fade'" ref="menuspopup" >
		<view class="flex flex-row align-center justify-center" style="background-color: #4C4C4C;border-radius: 10rpx;">
			<block v-for="(item,index) in menusList" :key="index">
				<view @click="item.event()" class="flex flex-column align-center justify-center my-2" style="width: 90rpx;">
					<em-icon style="font-size: 22px;color: #fff;" :unicode="item.iconUnicode"></em-icon>
					<text style="font-size: 12px;color: #fff;margin-top: 5rpx;">{{item.name}}</text>
				</view>
			</block>
		</view>	
	</em-menus-popup>
	<em-editable-popup ref="editablepopup" type="center"/>
  </uni-popup>
</template>

<script>
	
	import {
		mapState
	} from 'vuex'
  let app = {}
  // #ifdef MP-WEIXIN
  app = getApp({
    allowDefault: true
  }).$vm
  // #endif
  // #ifndef MP-WEIXIN
  app = getApp({
    allowDefault: true
  })
  // #endif
  let timer = null
  export default {
    name: 'em-header',
    props: {
    },
    data() {
      return {
        styles: {},
		confirm:null,
		menus:[],
		title:"",
		current:0,
		phrase_list:[],
		menusList:[]
      }
    },
    watch: {
    },
	computed: {
	  ...mapState([
	    'systemInfo',
	  	'config'
	  ]),
	 
	},
	async created() {
		//this.getphrase()
	},
    methods: {
		editablePopup(item = {}){
			this.$refs.editablepopup.open({
				title:"添加常用语",  
				confirmText:"确认",
				cancelText:"取消",
				placeholder:"点击输入常用语...",
				duration:50000,
				content:item.content||'',
				confirm:(res)=>{
					
					if(!res.content){
						this.$refs.editablepopup.close()
						return
					};
					uni.$http.post("/api/phrase/create",{
						content:res.content,
						id:item.id||0
					})
					.then(res=>{
						this.getphrase()
						//uni.showToast({	icon:'none',title: '已添加',icon: 'none'});
						this.$refs.editablepopup.close()
					})
					.catch(err=>{
						this.$refs.editablepopup.close()
					})
					
				},
				cancel:()=>{
					//this.$refs.editablepopup.close()
				}	  
			})
		},
		longFace(e,item){
				this.menusList = []
				this.menusList.push({
					name:"删除",
					iconUnicode:'\uec2a',
					event:()=>{
						uni.$http.post("/api/phrase/del",{
							id:item.id,
						})
						.then(res=>{
							this.getphrase()
						})
						this.$refs.menuspopup.close();
					}
				})
				
				this.menusList.push({
					name:"置顶",
					iconUnicode:'\uea74',
					event:()=>{
						uni.$http.post("/api/phrase/settop",{
							id:item.id,
						})
						.then(res=>{
							this.getphrase()
						})
						this.$refs.menuspopup.close();
					}
				})
				
				this.menusList.push({
					name:"编辑",
					iconUnicode:'\uec86',
					event:()=>{
						this.editablePopup(item)
						this.$refs.menuspopup.close();
					}
				})
				
				if(this.menusList.length == 0)return;
				uni.vibrateShortCustom();
				this.$refs.menuspopup.open(e);
				// #ifdef H5
				e.preventDefault();
				return false;
				// #endif
			
		},
		
	  async getphrase(){
		const res = await uni.$http.get("/api/phrase/index",{
			limit:100,
		})
		.catch(err=>{
			console.log("err",err)
		})
		console.log("res.rows",res.rows)
		if(!res.rows){
			return
		}
		//this.favor_face_list = res.rows;
		this.phrase_list = res.rows
	  },
	  async getphraseMore(){
	  		const res = await uni.$http.get("/api/phrase/index",{
	  		})
	  		.catch(err=>{
	  			console.log("err",err)
	  		})
	  		if(!res.rows){
	  			return
	  		}
	  },
	  onSwiperChange(event){
		 this.current = event.detail.current
	  },
	  swiperChange(index){
	  	this.current = index
	  },
	  open({confirm}){
		let _this = this
		this.$refs.confirm.open()
		this.$refs.confirm.closeMask()
		this.confirm = confirm
		this.getphrase()
	  },
	  onClose(e){
		  console.log(e)
		if(e.show){
			uni.$emit('ontools_height_change',{height:uni.upx2px(600)});
		}else{
			setTimeout(function() {
				uni.$emit('ontools_height_change',{height:uni.upx2px(0)}); 
			}, 100);
		}
		//console.log(e)
		 
	  },
	  onText(e){
		this.confirm&&this.confirm({type:'text',content:e.content})   
	  },
	  onFace(e){
		 this.confirm&&this.confirm({type:'face',...e})   
	  },
	  onConfirm(e){
		//this.close()
		this.confirm&&this.confirm(e) 
	  },
	  close(){
		 this.$refs.confirm.close() 
	  },
    }
  }
</script>

<style>
.camera-icon{
	padding: 60rpx;
	border-radius: 30rpx;
	font-size: 32px;
}
.border-bottom{
	border-bottom-width: 1px;
	border-style: solid;
	border-color: #EBEBEB;
}
.list-item-left-icon-text {
	font-size: 26px;
}
 .emojiicon {
    font-family: emojiicon !important;
    font-style: normal;
  }

</style>
